<script>
import { mapState } from 'vuex'

export default {
  name: 'areaForm',
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        areaName: '',
        spaceNumber: '',
        areaProportion: '',
        ruleId: '',
        remark: ''
      },
      /* 表单规则对象 */
      formRules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位数（个）', trigger: 'blur' }

        ],
        areaProportion: [
          { required: true, message: '请输入面积（㎡）', trigger: 'blur' }

        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 获取计费规则的回调函数 */
    async fetchDropList() {
      try {
        await this.$store.dispatch('areaStore/fetchDropList')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 查找区域的回调函数(数据对象) */
    findArea(area) {
      this.formData = { ...area }
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      try {
        const validate = await this.$refs.formRef.validate().catch(error => error)
        if (!validate) return
        const result = await this.$store.dispatch('areaStore/addOrUpdateArea', this.formData)
        this.$message.success(result)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 清空表单数据的回调函数 */
    resetFormData() {
      this.$refs.formRef.resetFields()
    }
  },
  computed: {
    ...mapState('areaStore', ['dropList'])
  },
  mounted() {
    this.fetchDropList()
  },
  emits: ['success']
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="区域名称" prop="areaName">
      <el-input size="small" placeholder="请输入区域名称" v-model="formData.areaName"></el-input>
    </el-form-item>
    <el-form-item label="车位数(个)" prop="spaceNumber">
      <el-input size="small" placeholder="请输入车位数（个）" v-model="formData.spaceNumber"></el-input>
    </el-form-item>
    <el-form-item label="面积(㎡)" prop="areaProportion">
      <el-input size="small" placeholder="请输入面积（㎡）" v-model="formData.areaProportion"></el-input>
    </el-form-item>
    <el-form-item label="计费规则" prop="ruleId">
      <el-select size="small" v-model="formData.ruleId" placeholder="请选择关联计费规则">
        <el-option v-for="(item) in dropList" :value="item.ruleId" :label="item.ruleName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input type="textarea" size="small" placeholder="请输入备注" v-model="formData.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  .el-select {
    width: 100%;
  }
}
</style>
